<template>
<Page :loading="loading">
  <span slot="title"></span>
  <section>
    <div class="top">
      <div class="logo">
        <img src="~/assets/img/home-logo.png" alt="">
      </div>
      <div class="bar fx" :class="{'mini-bar':fixedTopBar}">
        <div @click="$toast('请下载APP')" class="item fxv fx-center">
          <img src="~/assets/img/icon-scan.png" />
          <span>扫码付</span>
        </div>
        <nuxt-link to="/pay/code" class="item fxv fx-center">
          <img src="~/assets/img/icon-payment.png" />
          <span>付款</span>
        </nuxt-link>
        <nuxt-link to="/recv" class="item fxv fx-center">
          <img src="~/assets/img/icon-receive.png" />
          <span>收款</span>
        </nuxt-link>
        <nuxt-link to="/accept" class="item fxv fx-center">
          <img src="~/assets/img/icon-transfer.png" />
          <span>转账</span>
        </nuxt-link>
      </div>
    </div>

    <nav v-if="top.length">
      <div @click="toGoodsList(item)" class="item fxv fx-center" v-for="item in top" :key="item.cate_id">
        <img :data-src="item.thumb" />
        <span>{{item.name}}</span>
      </div>
    </nav>

    <section class="section-card">
      <div class="sc-title fx fx-vc fx-between">
        <p>生活服务</p>
        <!-- <nuxt-link to="/category_more" class="more">更多</nuxt-link> -->
      </div>
      <div class="grid" v-if="centre.length">
        <div @click="toGoodsList(item)" class="item fxv fx-center" v-for="item in centre" :key="item.cate_id">
          <img :data-src="item.thumb" >
          <span>{{item.name}}</span>
        </div>
      </div>
      <div class="banner fx">
        <div class="left">
          <div @click="toGoodsList({cate_id:left.cate_id,name:left.name})" class="item" v-if="left.cate_id">
            <div class="title">
              <p>{{left.name}}</p>
              <span>{{left.sub_name}}</span>
            </div>
            <img :data-src="left.thumb" v-if="left.thumb">
          </div>
        </div>
        <div class="right">
          <div  @click="toGoodsList(item)" class="item" v-for="item in right" :key="item.cate_id">
            <div class="title">
              <p>{{item.name}}</p>
              <span>{{item.sub_name}}</span>
            </div>
            <img :data-src="item.thumb" v-if="item.thumb">
          </div>
        </div>
      </div>
    </section>

    <bottom-nav-bar></bottom-nav-bar>
  </section>
</Page>
</template>

<script>
import Page from '~/components/page';
import BottomNavBar from '~/components/BottomNavBar.vue';
import Lazy from "~/plugins/lazy"

export default {
  components:{
    BottomNavBar,
    Page
  },
  data(){
    return {
      top:[],
      centre:[],
      left:{},
      right:[],
      lazy:new Lazy(),
      fixedTopBar:false,
      loading:true,
    }
  },
  async mounted () {
    this.$nextTick(async () => {
      this.$nuxt.$loading.start();

      //获取生活服务
      await this.getHomeCategory();
      this.loading = false;
      this.$nuxt.$loading.finish();

    })

    // 监听滚动事件
    window.addEventListener('scroll',this.scroll);
  },
  destroyed(){
    //销毁的时候干掉滚动监听事件
    window.removeEventListener('scroll',this.scroll);
  },
  methods: {
    scroll(e){//滚动监听
      let top = document.body.scrollTop || document.documentElement.scrollTop;
      this.fixedTopBar = top>=80
    },
    async getHomeCategory(){
      try{
        let { data: rs } = await this.$axios.post('?ct=api&ac=home_category');
        if(rs.code === 0){
          const { data } = rs;
          this.top = data.top;
          this.centre = data.centre;
          this.left = data.left;
          this.right = data.right;

          this.$nextTick(()=>{
            this.lazy.update();
          })
        }else{
          this.$toast(rs.msg);
        }
      }catch(e){
        this.$error(e);
      }
    },
    toGoodsList(item){//跳转到列表页
      this.$router.push({name:'good-list',query:{name:item.name,cate_id:item.cate_id}})
    }
  }
}
</script>

<style lang="less" scoped>
  .top {
    height:346px;
    background-color:#2086f9;
  }
  .logo {
    padding:20px 0 26px;
    box-sizing: content-box;
    img {
      display: block;
      width:690px;
      height:17px;
      margin:0 auto;
    }
  }
  .bar {
    padding:20px 0;
    .item {
      width:25%;
      img {
        width:58px;
        height:58px;
      }
      span {
        margin-top:24px;
        font-size:28px;
        color:#fff;
      }
    }

    &.mini-bar {
      position: fixed;
      left:0;
      top:0;
      right:0;
      z-index:3;
      background-color:#2086f9;

      .item {
        width:auto;
        padding:0 30px;
        img {
          width:45px;
          height:45px;
        }
        span {
          display: none;
        }
      }
    }
  }

  nav {
    position:absolute;
    top:254px;
    left:0;
    right:0;
    display: flex;
    margin: 0 20px;
    background-color:#fff;
    border-radius: 10px;
    padding:24px 0;
    box-shadow: 0 1px 10px 0 #f1f3f9;

    .item {
      padding:8px 0;
      width:25%;
      img {
        display: block;
        width:80px;
        height:80px;
      }
      span {
        margin-top:28px;
        font-size:26px;
        color:#292929;
      }
    }
  }

  .section-card {
    padding-top:150px;
    background-color:#fff;
    margin-bottom:20px;
    .sc-title {
      padding:10px 30px 0;
      p {
        font-size:34px;
        color:#150e0e;
      }
      .more {
        font-size:26px;
        color:#666;
      }

    }
    .grid {
      display: flex;
      flex-wrap: wrap;
      padding:24px 0;
      .item {
        padding:16px 0;
        width:25%;

        img {
          display: block;
          width:60px;
          height:60px;
        }
        span {
          .text-ellipsis();
          margin-top:28px;
          font-size:26px;
          color:#211a1a;
        }
      }
    }
    .banner {
      border-top:1px solid #ededf0;/*no*/
      .left,.right {
        width:50%;
        height:450px;

        .item {
          position: relative;
          &::before {
            content: '';
            position: absolute;
            z-index:1;
            top:0;
            left:0;
            width:100%;
            height:100%;
            background:linear-gradient(135deg,#fff 30%,rgba(255,255,255,0))
          }
          .title,.goods {
            position: relative;
            z-index:2;
            padding:30px;
            p,span {
              .text-ellipsis();
            }
          }
          .title {
            p {
              font-size:34px;
              color:#292929;
            }
            span {
              display: block;
              margin-top:12px;
              font-size:24px;
              color:#999;
            }
          }
        }
      }

      .left {
        .item {
          height: 100%;
        }
        img {
          position: absolute;
          top:0;
          left:0;
          width:100%;
          height:100%;
        }
        .goods {
          margin-top:50px;
          p {
            font-size:26px;
            color:#150e0e;
          }
          span {
            display: block;
            margin-top:24px;
            font-size:24px;
            color:#f05521;
          }
        }
      }
      .right {
        border-left:1px solid #ededf0;/*no*/
        .item {
          & + .item {
            border-top:1px solid #ededf0;/*no*/
          }
          height:150px;
          overflow:hidden;
          img {
            position: absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
          }
        }
      }

    }
  }
</style>
